<script>
import dayjs from "dayjs";
export default {
  data() {
    return {
      //与input框进行双向绑定，用来保存用户输入的过滤关键字
      filterText: "",
      //存储部门列表信息
      dept: [],
      //指定了树节点数据的属性名称，如子节点使用'children'属性，标签使用'label'
      defaultProps: {
        children: "children",
        label: "label",
      },
      //表格的相关信息
      table: {
        userList: [],
        loading: false,
      },
      //控制分页信息
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      //筛选表单绑定的关键字
      filter: {
        userName: "", //用户名称
        phonenumber: "",  //手机号码
        status: "", //状态
        createTime: [], //创建时间获取到一个数组，第一项为开始时间，第二项为结束时间
        beginTime:'', //格式化后的开始时间
        endTime:'' //格式化后的结束时间
      },
    };
  },
  watch: {
    //监听输入过滤关键字，一旦发生变化，就触发树节点的过滤
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    //获取部门数据
    async queryDeptTree() {
      try {
        let { code, data, msg } = await this.$API.system.queryDeptTree();
        if (+code !== 200) {
          data = [];
        }
        this.dept = data;
      } catch (error) {
        console.log(error);
      }
    },
    /* 
        用来过滤树节点的函数，value是过滤关键字，data是树节点的数据
        过滤时检查节点的label属性是否包含了用户输入的关键字
        如果节点的label属性包含过滤关键字，返回true，节点会显示；不包含，返回false，节点不会显示

    */
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    //获取用户列表数据
    async queryUserList() {
      let {
        page: { pageNum, pageSize },
        filter: { userName, phonenumber, status,beginTime,endTime },
      } = this;
      try {
        let { code, rows, total } = await this.$API.system.queryUserList({
          pageNum,
          pageSize,
          userName,
          phonenumber,
          status,
          beginTime,
          endTime
        });
        if (+code !== 200) {
          rows = [];
          total = 0;
        }
        this.table.userList = rows;
        this.page.total = total;
      } catch (error) {
        console.log(error);
      }

      // this.table.loading=false
    },
    //每页条数改变时执行
    handleSizeChange() {
      this.queryUserList();
    },
    //当前页码改变时执行
    handleCurrentChange() {
      this.queryUserList();
    },
    //当时间选择器选中时触发
    formatTime(){
      //使用dayjs将时间变为'YYYY-MM-DD'的格式
      this.filter.beginTime=dayjs(this.filter.createTime[0]).format('YYYY-MM-DD')
      this.filter.endTime=dayjs(this.filter.createTime[1]).format('YYYY-MM-DD')
      console.log(this.filter.beginTime);
      console.log(this.filter.endTime);
    },
    //打开消息确认框
    openMessageBox(status,userName) {
      let label = +status === 1 ? "停用" : "使用";
      this.$confirm(`确认要"${label}"${userName}"用户吗？`, `系统提示`, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.changeUserStatus(status,userName)
        })
        .catch((error) => {
          console.log(error);
          this.$message({
            type: "info",
            message: "已取消用户状态修改",
          });
        });
    },
    //修改用户的状态
    async changeUserStatus(status,userName){
      try {
        let {code,msg}=await this.$API.system.changeUserStatus(status,userName);
        if (code!==200) {
          this.$notify.error(msg)
          return
        }
        this.$message.success('改变用户状态成功')
      } catch (error) {
        console.log(error);
      }
    },
    reset(){
      this.filter.userName=''
      this.filter.phonenumber=''
      this.filter.status=''
      this.filter.createTime=[]
      this.filter.beginTime=''
      this.filter.endTime=''
      this.queryUserList()
    },
 
  },
  created() {
    this.queryDeptTree();
    this.queryUserList();
  },
};
</script>

<template>
  <div class="wrapper">
    <div class="dept-box">
      <el-input
        placeholder="请输入部门名称"
        v-model="filterText"
        prefix-icon="el-icon-search"
      >
      </el-input>
      <el-tree
        class="filter-tree"
        :data="dept"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
      >
      </el-tree>
    </div>

    <div class="user-box">
      <div class="filter-box">
        <div class="form-item">
          <label>用户名称</label>
          <el-input
            v-model.trim="filter.userName"
            placeholder="请输入用户名称"
            @keydown.native.enter="queryUserList"
          ></el-input>
        </div>
        <div class="form-item">
          <label>手机号码</label>
          <el-input
            v-model.trim="filter.phonenumber"
            @keydown.native.enter="queryUserList"
            placeholder="请输入手机号码"
          ></el-input>
        </div>
        <div class="form-item">
          <label>状态</label>
          <el-select v-model="filter.status" placeholder="用户状态">
            <el-option value="0" label="正常"></el-option>
            <el-option value="1" label="停用"></el-option>
          </el-select>
        </div>
        <div class="form-item">
          <label>创建时间</label>
          <el-date-picker
            v-model="filter.createTime"
            @change="formatTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="handler">
          <el-button type="primary" icon="el-icon-search" @click="queryUserList"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table :data="table.userList">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="userId" label="用户编号"></el-table-column>
          <el-table-column prop="userName" label="用户名称"></el-table-column>
          <el-table-column prop="nickName" label="用户昵称"></el-table-column>
          <el-table-column prop="dept.deptName" label="部门"></el-table-column>
          <el-table-column
            prop="phonenumber"
            label="手机号码"
            min-width="150px"
          ></el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="{row:{status,userName}}">
              <el-switch
              v-model="status"
              @change="openMessageBox(status,userName)"
              active-color="#409EFF"
              inactive-color="#e0e0e0"
              active-value="0"
              inactive-value="1"
            />
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="150px"
          ></el-table-column>
          <el-table-column label="操作" min-width="150px"></el-table-column>
          <template #append>
            <el-pagination
              background
              layout="total,sizes,prev,pager,next,jumper"
              hide-on-single-page
              :total="page.total"
              :page-size="page.pageSize"
              :current-page.sync="page.pageNum"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </template>
        </el-table>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.wrapper {
  display: flex;
  padding: 10px;
  background-color: #ffff;
  .dept-box {
    width: 216px;
    height: 312px;
    padding: 0 10px;
  }
  // /deep/ .el-table__row{
  //   height:200px;
  // }
  .user-box {
    width: 1082px;

    .filter-box {
      width: 1082px;
      padding: 0 10px;
      display: block;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      .form-item {
        display: flex;
        //   width: 308px;
        height: 32px;
        margin: 0 10px 18px 0;

        label {
          width: 80px;
          height: 32px;
          line-height: 32px;
          margin-right: 12px;
          text-align: left;
        }
      }
      .handler {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-left: 20px;
        padding-top: 5px;
        ::v-deep(.el-button) {
          border-radius: 15px;
          padding: 8px 15px;
          width: 41px;
          height: 12px;
          box-sizing: content-box;
          padding-left: 10px;
        }
      }
    }
    .table-box {
      margin-top: 15px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      ::v-deep(.el-table) {
        text-align: center;
        ::v-deep(el-table__row) {
          text-align: center;
        }

        .el-pagination {
          margin: 30px 0;
          text-align: right;
        }
      }
    }
  }
}
</style>
